<template>
  <div class="settings-container">
    <el-card class="settings-card">
      <template #header>
        <div class="card-header">
          <h2>系统设置</h2>
        </div>
      </template>
      
      <el-tabs v-model="activeTab" tab-position="left" class="settings-tabs">
        <!-- 运费设置 -->
        <el-tab-pane label="运费设置" name="freight">
          <div class="tab-content">
            <h3>基础运费设置</h3>
            <el-form :model="freightSettings" label-width="180px" class="settings-form">
              <el-form-item label="同城基础运费 (元)">
                <el-input-number v-model="freightSettings.localBaseFee" :min="0" :precision="2" :step="5" />
              </el-form-item>
              
              <el-form-item label="省内跨城基础运费 (元)">
                <el-input-number v-model="freightSettings.inProvinceBaseFee" :min="0" :precision="2" :step="5" />
              </el-form-item>
              
              <el-form-item label="跨省基础运费 (元)">
                <el-input-number v-model="freightSettings.crossProvinceBaseFee" :min="0" :precision="2" :step="5" />
              </el-form-item>
              
              <el-divider content-position="left">距离附加费</el-divider>
              
              <el-form-item label="省内每公里费用 (元)">
                <el-input-number v-model="freightSettings.inProvincePerKm" :min="0" :precision="2" :step="0.1" />
              </el-form-item>
              
              <el-form-item label="跨省每公里费用 (元)">
                <el-input-number v-model="freightSettings.crossProvincePerKm" :min="0" :precision="2" :step="0.1" />
              </el-form-item>
              
              <el-divider content-position="left">重量附加费</el-divider>
              
              <el-form-item label="重量免费额度 (kg)">
                <el-input-number v-model="freightSettings.freeWeightLimit" :min="0" :precision="1" :step="0.5" />
              </el-form-item>
              
              <el-form-item label="标准服务超重每kg (元)">
                <el-input-number v-model="freightSettings.standardPerKg" :min="0" :precision="2" :step="1" />
              </el-form-item>
              
              <el-form-item label="特快服务超重每kg (元)">
                <el-input-number v-model="freightSettings.expressPerKg" :min="0" :precision="2" :step="1" />
              </el-form-item>
              
              <el-form-item label="经济服务超重每kg (元)">
                <el-input-number v-model="freightSettings.economyPerKg" :min="0" :precision="2" :step="1" />
              </el-form-item>
              
              <el-divider content-position="left">服务费用系数</el-divider>
              
              <el-form-item label="特快服务费系数">
                <el-input-number v-model="freightSettings.expressCoefficient" :min="1" :precision="2" :step="0.1" />
              </el-form-item>
              
              <el-form-item label="经济服务费系数">
                <el-input-number v-model="freightSettings.economyCoefficient" :min="0.1" :max="1" :precision="2" :step="0.1" />
              </el-form-item>
              
              <el-divider content-position="left">增值服务费</el-divider>
              
              <el-form-item label="签名确认服务费 (元)">
                <el-input-number v-model="freightSettings.signatureFee" :min="0" :precision="2" :step="1" />
              </el-form-item>
              
              <el-form-item label="短信通知服务费 (元)">
                <el-input-number v-model="freightSettings.smsFee" :min="0" :precision="2" :step="1" />
              </el-form-item>
              
              <el-form-item label="优先处理服务费 (元)">
                <el-input-number v-model="freightSettings.priorityFee" :min="0" :precision="2" :step="1" />
              </el-form-item>
              
              <el-form-item label="保价费率 (‰)">
                <el-input-number v-model="freightSettings.insuranceRate" :min="0" :precision="2" :step="0.5" />
                <span class="form-tip">每1000元收取的保价费金额</span>
              </el-form-item>
            </el-form>
          </div>
        </el-tab-pane>
        
        <!-- 通知设置 -->
        <el-tab-pane label="通知设置" name="notification">
          <div class="tab-content">
            <h3>短信通知设置</h3>
            <el-form :model="notificationSettings" label-width="180px" class="settings-form">
              <el-form-item label="是否启用短信通知">
                <el-switch v-model="notificationSettings.enableSms" />
              </el-form-item>
              
              <el-form-item label="短信服务提供商">
                <el-select v-model="notificationSettings.smsProvider" placeholder="请选择短信服务提供商">
                  <el-option label="阿里云" value="aliyun" />
                  <el-option label="腾讯云" value="tencent" />
                  <el-option label="华为云" value="huawei" />
                </el-select>
              </el-form-item>
              
              <el-form-item label="API Key">
                <el-input v-model="notificationSettings.apiKey" placeholder="API Key" />
              </el-form-item>
              
              <el-form-item label="API Secret">
                <el-input v-model="notificationSettings.apiSecret" type="password" placeholder="API Secret" show-password />
              </el-form-item>
              
              <el-divider content-position="left">通知触发条件</el-divider>
              
              <el-form-item label="新订单创建时通知">
                <el-switch v-model="notificationSettings.notifyOnCreate" />
              </el-form-item>
              
              <el-form-item label="订单状态变更时通知">
                <el-switch v-model="notificationSettings.notifyOnStatusChange" />
              </el-form-item>
              
              <el-form-item label="订单签收时通知">
                <el-switch v-model="notificationSettings.notifyOnDelivered" />
              </el-form-item>
              
              <el-divider content-position="left">短信模板</el-divider>
              
              <el-form-item label="新订单通知模板">
                <el-input v-model="notificationSettings.createTemplate" type="textarea" :rows="3" />
                <div class="template-vars">
                  可用变量: {订单号}, {寄件人}, {收件人}, {创建时间}
                </div>
              </el-form-item>
              
              <el-form-item label="状态变更通知模板">
                <el-input v-model="notificationSettings.statusChangeTemplate" type="textarea" :rows="3" />
                <div class="template-vars">
                  可用变量: {订单号}, {状态}, {更新时间}, {操作地点}
                </div>
              </el-form-item>
              
              <el-form-item label="签收通知模板">
                <el-input v-model="notificationSettings.deliveredTemplate" type="textarea" :rows="3" />
                <div class="template-vars">
                  可用变量: {订单号}, {签收时间}, {签收人}
                </div>
              </el-form-item>
            </el-form>
            
            <h3>其他通知渠道</h3>
            <el-form :model="notificationSettings" label-width="180px" class="settings-form">
              <el-form-item label="是否启用邮件通知">
                <el-switch v-model="notificationSettings.enableEmail" />
              </el-form-item>
              
              <el-form-item label="是否启用微信通知">
                <el-switch v-model="notificationSettings.enableWeChat" />
              </el-form-item>
              
              <el-form-item label="是否启用飞书通知">
                <el-switch v-model="notificationSettings.enableLark" />
              </el-form-item>
              
              <el-form-item label="是否启用钉钉通知">
                <el-switch v-model="notificationSettings.enableDingTalk" />
              </el-form-item>
            </el-form>
          </div>
        </el-tab-pane>
        
        <!-- 系统参数 -->
        <el-tab-pane label="系统参数" name="system">
          <div class="tab-content">
            <h3>基本设置</h3>
            <el-form :model="systemSettings" label-width="180px" class="settings-form">
              <el-form-item label="系统名称">
                <el-input v-model="systemSettings.systemName" />
              </el-form-item>
              
              <el-form-item label="公司名称">
                <el-input v-model="systemSettings.companyName" />
              </el-form-item>
              
              <el-form-item label="联系电话">
                <el-input v-model="systemSettings.contactPhone" />
              </el-form-item>
              
              <el-form-item label="联系邮箱">
                <el-input v-model="systemSettings.contactEmail" />
              </el-form-item>
              
              <el-divider content-position="left">订单设置</el-divider>
              
              <el-form-item label="订单号前缀">
                <el-input v-model="systemSettings.orderPrefix" />
              </el-form-item>
              
              <el-form-item label="订单自动取消时间 (小时)">
                <el-input-number v-model="systemSettings.orderCancelHours" :min="0" :step="1" />
                <span class="form-tip">未付款订单超过此时间将自动取消，0表示不自动取消</span>
              </el-form-item>
              
              <el-divider content-position="left">地图设置</el-divider>
              
              <el-form-item label="地图服务提供商">
                <el-select v-model="systemSettings.mapProvider">
                  <el-option label="高德地图" value="amap" />
                  <el-option label="百度地图" value="baidu" />
                  <el-option label="腾讯地图" value="tencent" />
                </el-select>
              </el-form-item>
              
              <el-form-item label="地图API Key">
                <el-input v-model="systemSettings.mapApiKey" />
              </el-form-item>
            </el-form>
          </div>
        </el-tab-pane>
      </el-tabs>
      
      <div class="settings-actions">
        <el-button type="primary" @click="saveSettings">保存设置</el-button>
        <el-button @click="resetSettings">重置</el-button>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'

const activeTab = ref('freight')

// 运费设置数据
const freightSettings = reactive({
  // 基础运费
  localBaseFee: 10, // 同城基础运费
  inProvinceBaseFee: 15, // 省内跨城基础运费
  crossProvinceBaseFee: 42, // 跨省基础运费
  
  // 距离附加费
  inProvincePerKm: 0.1, // 省内每公里费用
  crossProvincePerKm: 0.08, // 跨省每公里费用
  
  // 重量附加费
  freeWeightLimit: 1, // 重量免费额度
  standardPerKg: 6, // 标准服务超重每kg
  expressPerKg: 10, // 特快服务超重每kg
  economyPerKg: 4, // 经济服务超重每kg
  
  // 服务费用系数
  expressCoefficient: 1.5, // 特快服务费系数
  economyCoefficient: 0.8, // 经济服务费系数
  
  // 增值服务费
  signatureFee: 5, // 签名确认服务费
  smsFee: 3, // 短信通知服务费
  priorityFee: 10, // 优先处理服务费
  insuranceRate: 3 // 保价费率 (每1000元收取的保价费)
})

// 通知设置数据
const notificationSettings = reactive({
  // 短信设置
  enableSms: true,
  smsProvider: 'aliyun',
  apiKey: 'LTAI4G1h1VcSSoRmCxRU****',
  apiSecret: '************',
  
  // 触发条件
  notifyOnCreate: true,
  notifyOnStatusChange: true,
  notifyOnDelivered: true,
  
  // 短信模板
  createTemplate: '尊敬的客户，您的快递订单 {订单号} 已创建成功，寄件人：{寄件人}，收件人：{收件人}，感谢您的使用。',
  statusChangeTemplate: '尊敬的客户，您的快递订单 {订单号} 状态已更新为 {状态}，更新时间：{更新时间}，当前位置：{操作地点}。',
  deliveredTemplate: '尊敬的客户，您的快递订单 {订单号} 已于 {签收时间} 签收，签收人：{签收人}，感谢您的使用。',
  
  // 其他通知渠道
  enableEmail: false,
  enableWeChat: true,
  enableLark: false,
  enableDingTalk: false
})

// 系统参数数据
const systemSettings = reactive({
  // 基本设置
  systemName: '物流订单跟踪系统',
  companyName: '优速物流科技有限公司',
  contactPhone: '400-123-4567',
  contactEmail: 'support@example.com',
  
  // 订单设置
  orderPrefix: 'LG',
  orderCancelHours: 24,
  
  // 地图设置
  mapProvider: 'amap',
  mapApiKey: '621cc4d8a28fc902a4538**********'
})

// 原始设置（用于重置）
let originalFreightSettings = {}
let originalNotificationSettings = {}
let originalSystemSettings = {}

// 保存设置
const saveSettings = () => {
  // 这里应该调用API保存设置到后端
  ElMessage.success('设置保存成功')
  
  // 更新原始设置
  originalFreightSettings = JSON.parse(JSON.stringify(freightSettings))
  originalNotificationSettings = JSON.parse(JSON.stringify(notificationSettings))
  originalSystemSettings = JSON.parse(JSON.stringify(systemSettings))
}

// 重置设置
const resetSettings = () => {
  // 重置为原始设置
  Object.assign(freightSettings, originalFreightSettings)
  Object.assign(notificationSettings, originalNotificationSettings)
  Object.assign(systemSettings, originalSystemSettings)
  ElMessage.info('已重置为上次保存的设置')
}

onMounted(() => {
  // 实际项目中这里应该从API获取设置
  // 模拟加载数据
  setTimeout(() => {
    // 保存当前设置作为原始设置（用于重置）
    originalFreightSettings = JSON.parse(JSON.stringify(freightSettings))
    originalNotificationSettings = JSON.parse(JSON.stringify(notificationSettings))
    originalSystemSettings = JSON.parse(JSON.stringify(systemSettings))
  }, 500)
})
</script>

<style scoped>
.settings-container {
  padding: 20px;
}

.settings-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-header h2 {
  font-size: 18px;
  font-weight: 600;
  margin: 0;
}

.settings-tabs {
  min-height: 500px;
}

.tab-content {
  padding: 0 20px;
}

.tab-content h3 {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 20px 0;
  color: #409EFF;
}

.settings-form {
  max-width: 800px;
}

.form-tip {
  font-size: 12px;
  color: #909399;
  margin-left: 10px;
}

.template-vars {
  font-size: 12px;
  color: #909399;
  margin-top: 5px;
}

.settings-actions {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  gap: 20px;
}

:deep(.el-tabs__item) {
  height: auto;
  padding: 15px 20px;
}

:deep(.el-input-number) {
  width: 180px;
}
</style> 